<template lang="pug">
.index
  .header
    .header-search
      el-input(placeholder="材料名称/发布者" prefix-icon="el-icon-search" clearable v-model="title" @change="changeSearch")
      .header-search-item
        el-date-picker(
          placeholder="选择时间"
          type="daterange"
          v-model="time"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="changeSearch"
        )
      el-select(placeholder="选择消息联系" prefix-icon="el-icon-search" clearable v-model="type" @change="changeSearch")
        el-option(label="系统消息", value="1")
        el-option(label="设计师分享", value="2")
        el-option(label="供应商分享", value="3")
        el-option(label="平台消息", value="4")
      el-select(placeholder="发布人员" prefix-icon="el-icon-search" clearable v-model="userId" @change="changeSearch")
        el-option(v-for="item in memberList", :label="item.userName", :value="item.employeeId", :key="item.employeeId")
    .header-btn
      el-button(type="primary" size="small" @click="editNotice" v-if="$permission('AB-00001-001')")
        .el-icon-arrow-right.el-icon-plus
        span 发布消息
      el-button(size="small" name="info" @click="patchDelete" v-if="$permission('AB-00001-002')") 批量删除
  .list-table
    el-table(
      :data="list"
      :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
      border
      style="width: 100%"
      v-loading="loading"
      empty-text="未找到符合条件的内容"
      @selection-change="handleSelectionChange"
    )
      el-table-column(type="selection" width="55" align="center")
      el-table-column(type="index" width="55" align="center" label="序号")
      el-table-column(label="信息标题" prop="title")
        template(slot-scope="scope")
          .table-item-name(@click="seeDetail(scope.row)") {{scope.row.title}}
      el-table-column(label="发布人" prop="employeeName")
      el-table-column(label="发布时间" prop="createTime" sortable)
      el-table-column(label="信息类型" prop="type")
      el-table-column(label="接收人员" prop="receiveType")
      el-table-column(label="操作 ")
        template(slot-scope="scope")
          .table-item-handle
            .table-item-btn.warning(@click="deleteRow(scope.row)") 删除
  notice-dialog(:show="showDialog", :item="currentItem" @close="closeDialog")
  edit-notice-dialog(:show="showEditDialog" @close="closeEditDialog" @confirm="confirm")
</template>

<script>
import { getMessageList, getMemberList, postDeleteMessage } from 'api'
import noticeDialog from '@/components/modal/noticeDialog'
import editNoticeDialog from '@/components/modal/editNoticeDialog'
export default {
  name: 'notice',
  data () {
    return {
      page: 1,
      pageSize: 20,
      total: 0,
      time: [],
      title: '',
      type: '',
      userId: '',
      list: [],
      loading: false,
      memberList: [],
      selections: [],
      showDialog: false,
      currentItem: {},
      showEditDialog: false
    }
  },
  components: {
    noticeDialog,
    editNoticeDialog
  },
  methods: {
    changeSearch () {
      this.page = 1
      this.getList()
    },
    handleSelectionChange (selections) {
      this.selections = selections
    },
    seeDetail (row) {
      this.showDialog = true
      this.currentItem = row
    },
    closeDialog () {
      this.showDialog = false
      this.currentItem = {}
    },
    editNotice () {
      this.showEditDialog = true
    },
    closeEditDialog () {
      this.showEditDialog = false
    },
    confirm () {
      this.getList()
      this.showEditDialog = false
    },
    deleteRow (row) {
      this.$confirm('确定要删除该条的公告嘛？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          await this.$axios.post(postDeleteMessage, { messageIds: [row.id] })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    patchDelete () {
      if (!this.selections.length) {
        this.$message.error('请先选择要删除的消息！')
        return
      }
      this.$confirm('确定要删除选择的公告嘛？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          let ids = this.selections.map(item => item.id)
          await this.$axios.post(postDeleteMessage, { messageIds: ids })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    async getList () {
      try {
        this.loading = true
        let query = { ...this.$route.query }
        query.currentPage = this.page
        query.pageLines = this.pageSize
        if (this.title) query.title = this.title
        if (this.type) query.type = this.type
        if (this.userId !== '') query.userId = this.userId
        if (this.time &&this.time.length) {
          query.startTime = this.time[0]
          query.endTime = this.time[1]
        }
        const { ResultSet } = await this.$axios.post(getMessageList, { ...query })
        this.total = ResultSet.recordNumber
        this.list = ResultSet.userData.announcements
        this.loading = false
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getMemberList () {
      try {
        const { ResultSet } = await this.$axios.post(getMemberList)
        this.memberList = ResultSet.userData.onloadMemberList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getMemberList()
      vm.getList()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
  }
} 
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: calc(100% - 44px);
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px;
  padding: 0 40px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  .el-input {
    width: 202px;
    margin-right: 16px;
  }
  .el-select {
    margin-right: 16px;
  }
  .header-search {
    display: flex;
    align-items: center;
  }
  .header-info {
    font-size: 14px;
    line-height: 22px;
    color: #8B8EAB;
  }
}
.table-pagination {
  padding: 24px 0;
  text-align: right;
}
.header-search-item {
  margin-right: 16px;
}
.table-item-handle {
  display: flex;
  .table-item-btn {
    margin-right: 8px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 6px;
    cursor: pointer;
    &.warning {
      background: #FDEFF1;
      color: #FF2E42;
    }
    &.normal {
      background: #F3F0FF;
      color: #7362F0;
    }
    &.info {
      background: #F6F6F9;
      color: #3E4373;
    }
  }
}
.table-item-name {
  cursor: pointer;
  color: #FF2E42;
}
</style>
